<template>
  <div>
    <van-button
      :loading="loading"
      class="follow-btn"
      round
      size="small"
      v-if="value"
      @click="onFollow"
      >已关注</van-button
    >
    <van-button
      :loading="loading"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      v-else
      @click="onFollow"
      >关注</van-button
    >
  </div>
</template>

<script>
import { addFollow, deleteFollow } from "@/api/user";
export default {
  data() {
    return {
      loading: false,
    };
  },
  props: {
    value: {
      type: Boolean,
      required: true,
    },
    user_id: {
      type: [String, Number, Object],
      required: true,
    },
  },
  methods: {
    // 关注/取消用户
    async onFollow() {
      this.loading = true;
      try {
        // 已关注 状态
        if (this.value) {
          let res = await deleteFollow(this.user_id);
          console.log(res);
        } else {
          // 未关注状态
          let res1 = await addFollow(this.user_id);
          console.log(res1);
        }
        // 修改is_followed 更改图标
        this.$emit("input", !this.value);
      } catch (error) {
        if (error.response && error.response.status === 400) {
          this.$toast("您不能关注您自己");
        }
        this.$toast("操作失败,请重试!");
        console.log(error);
      }
      this.loading = false;
    },
  },
};
</script>

<style>
</style>